<template>
  <div>
    <van-sticky>
      <van-nav-bar
        :title="currencyInfo.name"
        left-arrow
        @click-left="onClickLeft"
        :right-text="$t('myText.财务记录')"
        @click-right="rightClick"
      />
    </van-sticky>
    <div class="coinTop">
      <p>{{ currencyInfo.account }}</p>
      <p class="dollarMoney">≈${{ currencyInfo.dollar_account }}</p>
      <div class="coinMark">
        <p>
          <span class="coinIcon cIcon"></span>
          {{ currencyInfo.name }}
        </p>
        <p>
          <span class="coinIcon dIcon"></span>USDT
        </p>
      </div>
    </div>
    <!-- 切换 -->
    <van-tabs v-model="active" line-width="29px" title-active-color="#709DFF" @change="tabClick">
      <van-tab :title="$t('myText.all')"></van-tab>
      <van-tab :title="$t('myText.in')"></van-tab>
      <van-tab :title="$t('myText.out')"></van-tab>
    </van-tabs>
    <div class="coinList" v-if="currencyInfo.data.length > 0">
      <div class="coinItem"  v-for="(item,index) in currencyInfo.data" @click="$router.push({ name: 'Gathersuccess', params: { item: item } })" :key='index'>
    <!--    <img
          :src="
            item.status == 1
              ? require('../../assets/imgs/home/income.png')
              : require('../../assets/imgs/home/outMoney.png')
          "
          alt
          class="leftEl coinStatus"
        /> -->
        <div class="leftEl">
          <div>{{ item.target }}</div>
          <div class="itemTime">{{ item.create_time }}</div>
        </div>
        <div class="rightEl itemMoney">
          <span
            :style="item.status == 2 ? '  color: #4C84FF;' : '  color:#0ABDD3;'"
          >{{ item.status == 1 ? "+" : "-" }} {{ item.money }}</span>
        </div>
      </div>
    </div>
    <div v-else class="no-data">{{ $t("myText.noData") }}</div>
    <!-- 操作 -->
    <div class="btnWrap">
      <van-button @click="toChange">
        {{
        $t("myText.exchange")
        }}
      </van-button>
      <van-button @click="toWithdraw">{{ $t("myText.提现") }}</van-button>
      <van-button @click="toBill">{{ $t("myText.in") }}</van-button>
      <van-button @click="$router.push({ name: 'transfACC' })">
        {{
        $t("myText.out")
        }}
      </van-button>
    </div>
  </div>
</template>
<script>
import { Sticky } from "vant";
import { currencyBill } from "@/api/home";
import { backpage } from "@/utils/backPage";
import { getParams } from "@/utils/getParams";
export default {
  data() {
    return {
      currency_id: "",
      active: 0,
      currencyInfo: { data: [] }
    };
  },
  mounted() {

  },
  methods: {
    onClickLeft() {
      backpage();
    },
    rightClick() {
      this.$router.push({
        name: "WithdrawRecord",
        params: { id: this.currency_id }
      });
    },
    // 兑换
    toChange() {
      this.$router.push({ path: "exchange", query: { id: this.currency_id } });
    },
    // 转入
    toBill() {
      this.$router.push({ path: "Coin_bill", query: { id: this.currency_id } });
    },
    getData() {
      currencyBill(this.currency_id, this.active).then(res => {
        res.account = parseFloat(res.account).toFixed(2);
        res.data.forEach(item => {
          item.money = parseFloat(item.money).toFixed(2);
          item.target =
            item.target_account.substring(0, 4) +
            "****" +
            item.target_account.slice(-4);
        });
        this.currencyInfo = res;
      });
    },
    tabClick(name) {
      this.active = name;
      this.getData();
    },
    // 提现
    toWithdraw() {
      this.$router.push({
        path: "currency_withdraw",
        query: { id: this.currency_id, currency_name: this.currencyInfo.name }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.coinTop {
  width: 100%;
  height: 107px;
  // background-image: url("../../assets/imgs/home/coinBg.png");
  background-size: 100% 100%;
  color: #4c84ff;
  font-size: 30px;
  text-align: center;
  padding-top: 21px;
  position: relative;
}
/deep/ .van-tabs__line {
  background-color: #4c84ff;
}
.dollarMoney {
  font-size: 15px;
  color: #999;
}
.coinList {
  width: 342px;
  margin: 0 auto;
  padding-bottom: 80px;
}
.coinItem {
  overflow: hidden;
  border-bottom: 1px solid #eeeeee;
  padding: 18px 0;
  font-size: 15px;
}
.coinStatus {
  width: 40px;
  height: 40px;
  margin-right: 19px;
}
.itemTime {
  color: #cccccc;
  font-size: 13px;
  margin-top: 10px;
}
.itemMoney {
  font-size: 18px;
}
.coinMark {
  position: absolute;
  right: -20px;
  top: 30%;
  font-size: 12px;
  color: #333;
  margin-right: 40px;
  .coinIcon {
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 9px;
  }
  .cIcon {
    background: rgb(112, 157, 255);
  }
  .dIcon {
    background: red;
    margin-right: 8px;
  }
}
.btnWrap {
  position: fixed;
  bottom: 12px;
  left: 12px;
  .van-button {
    width: 78px;
    height: 46px;
    border-radius: 5px;
    margin-right: 13.5px;
    background: #0abdd3;
    color: #fff;
    &:first-child {
      background: #ff6666;
    }
    &:last-child {
      margin-right: 0;
      background: #4c84ff;
    }
  }
}
</style>
